﻿
@{
    ViewData["Title"] = "MenuAdd";
    Layout = "~/Views/Home/Main.cshtml";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<h2>添加菜单</h2>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form layui-form-pane" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">菜单父级id</label>
            <div class="layui-input-inline">
                <select id="parent_id" lay-filter="aihao">
                    <option value="0">/</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单名称</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="menu_name" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单Url</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="menu_url" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">授权</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="perms" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">菜单图标</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="menu_icon" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">排序</label>
                <div class="layui-input-block">
                    <input type="text" name="date" id="order_num" autocomplete="off" class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="radio" name="type" value="0" title="目录 " lay-filter="demo-radio-filter">
                    <input type="radio" name="type" value="1" title="菜单" lay-filter="demo-radio-filter">
                    <input type="radio" name="type" value="2" title="按钮" lay-filter="demo-radio-filter" checked>
                </div>
            </div>
        </div>
        <div id="functionSection">
            <div class="layui-form-item">
                <label class="layui-form-label">功能名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="permission_name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">功能路径</label>
                <div class="layui-input-inline">
                    <input type="text" name="date" id="is_perms" autocomplete="off" class="layui-input">
                </div>
                <div>
                    <button type="button" id="addFunction" class="layui-btn" onclick="AddText()">+</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <button type="button" class="layui-btn layui-btn-fluid" style="width:400px" onclick="MeunAdd()">
                新增菜单
            </button>
        </div>
    </form>
    <script>
                 layui.use(["form"],function () {
                    var form = layui.form;
                    var layer = layui.layer;
            window.MeunBang = function MeunBang() {
                var token = localStorage.getItem("token")
                $.ajax({
                    url: '../User/MenuBang',
                    type: 'get',
                    data: { token: token },
                    async: false,
                    //contentType: 'application/json',
                    success: function (res) {
                        var res = JSON.parse(res)
                        console.log(res)
                        var count = `<option value="0">/</option>`
                        $.each(res.data, function () {
                            count += `<option value="${this.id}">${this.menu_name}</option>`
                        })

                        $("#parent_id").html(count)


                        form.render();
                        console.log($("#parent_id"))
                    }
                })
            }
            form.on('radio(demo-radio-filter)', function (data) {
                var elem = data.elem; // 获得 radio 原始 DOM 对象
                var checked = elem.checked; // 获得 radio 选中状态
                var value = elem.value; // 获得 radio 值
                var othis = data.othis; // 获得 radio 元素被替换后的 jQuery 对象
                // 检查点击的单选按钮是否是"按钮"类型
                if (value == 2) {
                    // 如果是，显示功能相关输入框
                    $("#functionSection").show();
                } else {
                    // 如果不是，隐藏功能相关输入框
                    $("#functionSection").hide();
                }

            });

            $(function () {
                MeunBang()
            })
                });

        function AddText()
        {
            var newFunctionFields = document.createElement("div")
            newFunctionFields.innerHTML=`
                       <div class="layui-form-item">
                        <label class="layui-form-label">功能名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="button.permission_name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">功能路径</label>
                        <div class="layui-input-inline">
                            <input type="text" name="date" id="button.is_perms" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                `
            var parentElement = document.getElementById("functionSection");
            parentElement.appendChild(newFunctionFields);
        }
        function MeunAdd() {
            var type = $("[name=type]:checked").val();
            var token = localStorage.getItem("token")
            var button = []
            if (type === 2) {
                var inputs = $('#addFunction').find('[type="button"]');
                var permission_name;
                inputs.map(function (index, item) {
                    if (index % 2 === 0) {
                        permission_name = $(item).val();
                    } else {
                        button.push({
                            permission_name: permission_name,
                            is_perms: $(item).val()
                        });
                    }
                });
            }
            var button = button;

            var model = JSON.stringify({
                parent_id: $("#parent_id").val(),
                menu_name: $("#menu_name").val(),
                menu_url:$("#menu_url").val(),
                perms: $("#perms").val(),
                type: $("[name=type]:checked").val(),
                menu_icon: $("#menu_icon").val(),
                order_num: $("#order_num").val(),
                permission_name: $("#permission_name").val(),
                is_perms: $("#is_perms").val(),
                button:button
            })
            console.log(model)
            $.ajax({
                url: '../User/MenuAddDo',
                type: 'post',
                data: { model: model,token: token },
                //contentType: 'application/json',
                success: function (res) {
                    var res = JSON.parse(res)
                    console.log(res)
                   if(res.code==200)
                   {
                       alert("添加成功")
                   }
                   else{
                       alert("添加失败")
                   }
                }
            })
        }
    </script>
</body>
</html>

